<template>
  <a-layout-header :style="{ background: '#1890ff', padding: 0 }">
    <div class="logo">后端管理系统</div>
    <div class="avatar">
      <a-avatar icon="user" :src="$store.state.user.user.actor||''"/>
      <a-dropdown :trigger="['click']">
        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            {{$store.state.user.user.realName}}
          <a-icon type="down" />
        </a>
        <a-menu slot="overlay">
          <a-menu-item @click="logout"><a-icon type="logout" />注销</a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </a-layout-header>
</template>

<script>
import {logout} from '@/commonApi/login-api'
export default {
   data(){
     return{

     }
   },
   mounted(){
     
   },
   methods:{
     logout(){
       logout(this.$store.state.user.user.id).then(v=>{
         this.$store.dispatch('removeToken')
         this.$store.dispatch('removeUser')
         this.$router.replace('/login')
       })
     }
   }
};
</script>

<style lang="scss">
#common-layout {
  .logo {
    width: 200px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: rgba(211, 52, 52, 0.2);
    margin: 14px 20px 14px 24px;
    font-size: 16px;
    float: left;
    color: #fff;
    letter-spacing: 3px;
    font-family: cursive;
    font-weight: bold;
  }
  .avatar {
    height: 64px;
    line-height: 64px;
    float: right;
    padding: 0 25px;
    .ant-dropdown-link{
    color: #fff;
    margin-left: 5px;
    }
  }
  
}
</style>